<!--
 * @Description: 精英任务编辑页面
 * @Author: liyujie
 * @Date: 2021/05/10
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/05/10
-->
<template>
    <div class="wrapper elite-task-edit">
        <div class="content-wrapper">
            <!-- header -->
            <div class="header">
                <div class="header-title">
                    {{ type === 'edit' ? '编辑任务' : type === 'add' ? '新建任务' : '查看任务' }}
                </div>
            </div>
            <!-- /header -->
            <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="110px"
                :disabled="type === 'detail' || status == 1"
            >
                <div class="form-wrapper">
                    <div class="form-title">
                        任务类型
                    </div>
                    <div class="form-content">
                        <el-form-item label="*任务类型">
                            <el-radio-group
                                v-model="ruleForm.task_category"
                                :disabled="type === 'detail'"
                                @change="handleTaskTypeChange"
                            >
                                <el-radio :label="3">普通任务</el-radio>
                                <el-radio :label="2">寝室推广</el-radio>
                                <el-radio :label="5">多奖励任务</el-radio>
                                <el-radio :label="4">梯度任务</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </div>
                    <div class="form-title">
                        基本信息
                    </div>
                    <!--任务基本信息-->
                    <div class="form-content">
                        <el-form-item
                            label="任务标题"
                            prop="task_title"
                            key="task_title"
                            class="is-required"
                        >
                            <el-input
                                v-model="ruleForm.task_title"
                                size="medium"
                                clearable
                                placeholder="请输入任务标题"
                                style="width: 468px"
                                maxlength="20"
                                show-word-limit
                            />
                        </el-form-item>
                        <el-form-item
                            label="领取时间"
                            class="is-required"
                        >
                            <div style="display: flex; align-items: center">
                                <el-form-item
                                    prop="apply_start_time"
                                    key="apply_start_time"
                                >
                                    <el-date-picker
                                        v-model="ruleForm.apply_start_time"
                                        type="datetime"
                                        default-time="00:00:00"
                                        size="medium"
                                        placeholder="请选择开始时间"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail' || status == 1"
                                    />
                                </el-form-item>
                                <span style="margin: 0 10px">-</span>
                                <el-form-item
                                    prop="apply_end_time"
                                    key="apply_end_time"
                                >
                                    <el-date-picker
                                        v-model="ruleForm.apply_end_time"
                                        type="datetime"
                                        placeholder="请选择结束时间"
                                        default-time="23:59:59"
                                        size="medium"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail'"
                                    />
                                </el-form-item>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="任务时间"
                            class="is-required"
                            v-if="ruleForm.task_category === 4"
                        >
                            <el-form-item
                                prop="accept_expire_in"
                                key="accept_expire_in"
                            >
                                <el-input-number
                                    v-model="ruleForm.accept_expire_in"
                                    size="medium"
                                    placeholder="请输入"
                                    :step="1"
                                    step-strictly
                                    :controls="false"
                                    :min="-1"
                                    style="width: 378px"
                                >
                                    <span
                                        slot="suffix"
                                        style="margin-right: 6px"
                                    >小时</span>
                                </el-input-number>
                                <!--<el-checkbox
                                    v-model="ruleForm.accept_expire_in_type"
                                    label="不限制"
                                    style="margin-left: 12px"
                                />-->
                                <span class="form-item-tips">设置任务时间，代表该任务需要用户多久完成，超时则自动放弃</span>
                            </el-form-item>
                        </el-form-item>
                        <el-form-item
                            label="任务介绍"
                            prop="task_intro"
                            key="task_intro"
                            class="is-required"
                        >
                            <el-input
                                v-model="ruleForm.task_intro"
                                type="textarea"
                                placeholder="请输入任务介绍"
                                style="width: 468px"
                                :autosize="{ minRows: 4}"
                                maxlength="1000"
                                show-word-limit
                            />
                        </el-form-item>
                        <el-form-item
                            label="任务方式"
                            prop="task_flow"
                            key="task_flow"
                            v-if="ruleForm.task_category === 2"
                        >
                            <el-input
                                v-model="ruleForm.task_flow"
                                type="textarea"
                                placeholder="请输入任务方式"
                                style="width: 468px"
                                :autosize="{ minRows: 4}"
                                maxlength="100"
                                show-word-limit
                            />
                        </el-form-item>
                        <el-form-item label="任务图标">
                            <image-upload
                                v-model="ruleForm.task_logo"
                                :limit="20"
                                :type="status == 1 ? 'detail' : ''"
                                tips="图标大小120*120px，小于20kb"
                            />
                        </el-form-item>
                        <el-form-item
                            label="导师微信"
                            prop="task_qrcode"
                            key="task_qrcode"
                        >
                            <image-upload
                                v-model="ruleForm.task_qrcode"
                                limit-type="MB"
                                :limit="1"
                                :type="status == 1 ? 'detail' : ''"
                                tips="图片大小270*270px，小于1MB"
                            />
                        </el-form-item>
                        <el-form-item
                            label="任务图片"
                            prop="task_images"
                            key="task_images"
                            v-if="ruleForm.task_category === 2"
                        >
                            <image-upload-multiple
                                v-model="ruleForm.task_images"
                                :limit="200"
                                :type="status == 1 ? 'detail' : ''"
                                tips="宽度建议750像素，高度不限制，单张大小200KB以下，最多9张（可拖曳图片调整显示顺序），格式支持jpg、jpeg、png"
                            />
                        </el-form-item>
                        <el-form-item
                            label="用户群体"
                            class="is-required"
                            v-if="ruleForm.task_category === 3 || ruleForm.task_category === 5"
                        >
                            <el-radio-group
                                v-model="ruleForm.student_limit_type"
                                :disabled="type === 'detail'"
                            >
                                <!--<el-radio :label="0">全部用户</el-radio>-->
                                <!--<el-radio :label="1">仅限精英</el-radio>-->
                                <el-radio :label="2">精英等级</el-radio>
                                <el-select
                                    v-model="ruleForm.student_limit_stuagent_level"
                                    placeholder="全部精英"
                                    size="medium"
                                    style="width: 152px"
                                    :disabled="type === 'detail' || ruleForm.student_limit_type !== 2"
                                >
                                    <el-option
                                        v-for="item in 6"
                                        :key="item"
                                        :label="`E${item - 1}`"
                                        :value="item - 1"
                                    />
                                </el-select>
                            </el-radio-group>
                            <el-checkbox
                                v-model="ruleForm.show_only_for_trial_stuagent"
                                :true-label="1"
                                :false-label="0"
                                style="margin-left: 24px"
                            >
                                仅体验账号可见
                            </el-checkbox>
                            <span class="form-item-tips">注：不勾选，所有用户都看得到</span>
                        </el-form-item>
                        <el-form-item
                            label="用户群体"
                            class="is-required"
                            v-if="ruleForm.task_category === 4 && ruleForm.agent_level_limit_type === 0"
                        >
                            <el-radio-group
                                v-model="ruleForm.student_limit_type"
                                :disabled="type === 'detail'"
                            >
                                <!--<el-radio :label="0">全部用户</el-radio>-->
                                <!--<el-radio :label="1">仅限精英</el-radio>-->
                                <el-radio :label="2">精英等级</el-radio>
                                <el-select
                                    v-model="ruleForm.student_limit_stuagent_level"
                                    placeholder="全部精英"
                                    size="medium"
                                    style="width: 152px"
                                    :disabled="type === 'detail' || ruleForm.student_limit_type !== 2"
                                >
                                    <el-option
                                        v-for="item in 6"
                                        :key="item"
                                        :label="`E${item - 1}`"
                                        :value="item - 1"
                                    />
                                </el-select>
                            </el-radio-group>
                            <el-checkbox
                                v-model="ruleForm.show_only_for_trial_stuagent"
                                :true-label="1"
                                :false-label="0"
                                style="margin-left: 24px"
                            >
                                仅体验账号可见
                            </el-checkbox>
                            <span class="form-item-tips">注：不勾选，所有用户都看得到</span>
                        </el-form-item>
                        <el-form-item
                            label="精英等级设置"
                            class="is-required"
                            v-if="ruleForm.task_category === 4 && ruleForm.agent_level_limit_type === 1"
                        >
                            <el-checkbox-group v-model="ruleForm.allow_agent_levels">
                                <el-checkbox
                                    v-for="item in 6"
                                    :key="item"
                                    :label="item - 1"
                                >
                                    E{{ item - 1 }}
                                </el-checkbox>
                            </el-checkbox-group>
                            <el-checkbox
                                v-model="ruleForm.show_only_for_trial_stuagent"
                                :true-label="1"
                                :false-label="0"
                            >
                                仅体验账号可见
                            </el-checkbox>
                            <span class="form-item-tips">注：不勾选，所有用户都看得到</span>
                        </el-form-item>
                        <el-form-item
                            label="城市区域限制"
                            v-if="ruleForm.task_category === 4"
                        >
                            <el-cascader
                                v-model="ruleForm.binding_school_ids"
                                :options="schoolOptions"
                                style="width: 284px"
                                collapse-tags
                                clearable
                                size="medium"
                                :disabled="type === 'detail'"
                                :props="{
                                    multiple: true,
                                    label: 'name',
                                    value: 'id',
                                    emitPath: false
                                }"
                                @change="$forceUpdate()"
                            />
                            <span class="form-item-tips">非必填，不填写默认所有学校的用户可以领取</span>
                        </el-form-item>
                        <el-form-item
                            label="用户性别"
                            v-if="ruleForm.task_category === 4"
                        >
                            <el-radio-group
                                v-model="ruleForm.sex"
                                :disabled="type === 'detail'"
                            >
                                <el-radio :label="0">不限</el-radio>
                                <el-radio :label="1">男</el-radio>
                                <el-radio :label="2">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="上架状态">
                            <el-switch
                                v-model="ruleForm.task_status"
                                active-text="上架"
                                inactive-text="下架"
                                :active-value="1"
                                :inactive-value="0"
                            />
                        </el-form-item>
                        <el-form-item
                            label="排序号"
                            prop="task_sort"
                            key="task_sort"
                        >
                            <el-input-number
                                v-model="ruleForm.task_sort"
                                :controls="false"
                                :step="1"
                                step-strictly
                                :min="0"
                                placeholder="请输入排序号"
                                size="medium"
                                clearable
                                style="width: 152px"
                                :disabled="type === 'detail'"
                            />
                        </el-form-item>
                        <el-form-item
                            label="步骤引导"
                            class="is-required"
                            v-if="ruleForm.task_category !== 2"
                        >
                            <div class="steps-view">
                                <div
                                    class="step-item"
                                    v-for="(item, index) in ruleForm.guide"
                                    :key="index"
                                >
                                    <div class="step-item__header">
                                        <div class="step-item__header__title">步骤{{ numberChinese(index + 1) }}</div>
                                        <el-button
                                            type="text"
                                            :disabled="ruleForm.guide.length <= 1"
                                            @click="deleteStepItem(index)"
                                        >删除</el-button>
                                    </div>
                                    <div class="step-item__content">
                                        <el-form-item
                                            :prop="`guide[${index}].content`"
                                            :rules="rules.guide.content"
                                            key="guide_content"
                                            style="margin-bottom: 12px"
                                        >
                                            <div class="el-form-item__label">步骤引导内容</div>
                                            <el-input
                                                v-model="item.content"
                                                type="textarea"
                                                placeholder="请输入步骤引导内容"
                                                :autosize="{ minRows: 4}"
                                                maxlength="500"
                                                show-word-limit
                                            />
                                        </el-form-item>
                                        <el-form-item
                                            :prop="`guide[${index}].images`"
                                            :rules="rules.guide.images"
                                            key="guide_image"
                                            class="no-required"
                                        >
                                            <div class="el-form-item__label">
                                                步骤示意图
                                                <span class="label-tips">建议宽度750px，建议大小不超过1MB，支持jpg、jpeg、png；</span>
                                            </div>
                                            <image-upload-multiple
                                                v-model="item.images"
                                                style="margin-top: 48px"
                                                limit-type="MB"
                                                :limit="1"
                                                :type="status == 1 ? 'detail' : ''"
                                            />
                                        </el-form-item>
                                    </div>
                                </div>
                                <div
                                    class="add-btn"
                                    @click="addStepItem"
                                    v-if="status != 1"
                                >
                                    <i class="el-icon-plus"/>
                                    添加步骤
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="素材分享"
                            key="share_material"
                            v-if="ruleForm.task_category === 4"
                        >
                            <div class="material-view">
                                <el-form-item style="margin-bottom: 12px">
                                    <div class="el-form-item__label">分享文案</div>
                                    <el-input
                                        v-model="ruleForm.share_material.content"
                                        type="textarea"
                                        placeholder="请输入分享文案"
                                        :autosize="{ minRows: 4}"
                                        maxlength="500"
                                        show-word-limit
                                    />
                                </el-form-item>
                                <el-form-item>
                                    <div class="el-form-item__label">
                                        分享图片/视频
                                        <span
                                            class="form-item-tips"
                                            style="color: #999999"
                                        >视频和图片仅可选其一</span>
                                    </div>
                                    <div
                                        class="share-material__content"
                                        style="display: flex; align-items: center;"
                                    >
                                        <video-upload
                                            v-model="ruleForm.share_material.video_url"
                                            action="/student/task_stuagent%5Cget_upload_video_auth"
                                            request-cover="/student/task_stuagent%5Cget_video_cover"
                                            request-preview="/student/task_stuagent%5Cget_video_preview_url"
                                            v-if="!ruleForm.share_material.images.length"
                                            style=" margin-right: 24px"
                                            ref="videoUpload"
                                            limit-type="MB"
                                            :limit="200"
                                            @upload="(e) => {isUpload = e}"
                                            @after-upload="afterUpload"
                                        />
                                        <image-upload-multiple
                                            v-model="ruleForm.share_material.images"
                                            limit-type="MB"
                                            :limit="1"
                                            :max="9"
                                            v-if="!isUpload && !ruleForm.share_material.video_url"
                                            :type="status == 1 ? 'detail' : ''"
                                        />
                                    </div>
                                    <div
                                        class="form-item-tips"
                                        style="margin: 0"
                                    >视频格式支持mp4、mov、flv、mpg、avi，大小不超过200MB</div>
                                </el-form-item>
                            </div>
                        </el-form-item>
                    </div>
                    <div class="form-title">
                        任务数量、奖励、{{ ruleForm.task_category === 2 ? '要求设置' : '反馈设置' }}
                    </div>
                    <div class="form-content">
                        <!--寝室推广任务-->
                        <template v-if="ruleForm.task_category === 2">
                            <el-form-item label="推广学校">
                                <el-cascader
                                    v-model="ruleForm.room_series_school_id"
                                    placeholder="请选择学校"
                                    :options="school_tree"
                                    style="width: 284px;"
                                    filterable
                                    clearable
                                    size="medium"
                                    expand-trigger="click"
                                    :props="{
                                        label: 'name',
                                        value: 'id',
                                        emitPath: false
                                    }"
                                    @change="$forceUpdate()"
                                />
                                <span class="form-item-tips">不选择为不限学校</span>
                            </el-form-item>
                            <el-form-item label="推广寝室性别">
                                <el-radio-group
                                    v-model="ruleForm.room_series_sex"
                                    :disabled="type === 'detail'"
                                >
                                    <el-radio :label="0">不限</el-radio>
                                    <el-radio :label="1">男寝室</el-radio>
                                    <el-radio :label="2">女寝室</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="奖励设置">
                                <div class="room-reward-view">
                                    <div
                                        class="room-reward-item"
                                        v-for="(item, index) in ruleForm.room_series_award_list"
                                        :key="index"
                                    >
                                        <el-form-item
                                            label="完成数量"
                                            label-width="68px"
                                        >
                                            <el-input
                                                v-model="item.room_series_count"
                                                size="medium"
                                                clearable
                                                style="width: 164px"
                                                :disabled="type === 'detail'"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >个</span>
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item
                                            label="奖励"
                                            label-width="68px"
                                        >
                                            <el-input
                                                v-model="item.award_money"
                                                size="medium"
                                                clearable
                                                style="width: 164px"
                                                :disabled="type === 'detail'"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >元</span>
                                            </el-input>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-button
                                                type="text"
                                                style="margin-left: 24px"
                                                :disabled="ruleForm.room_series_award_list.length === 1"
                                                @click="deleteRoomReward(index)"
                                            >删除</el-button>
                                        </el-form-item>
                                    </div>
                                    <div
                                        class="add-btn"
                                        style="width: 518px"
                                        v-if="status != 1"
                                        @click="addRoomReward"
                                    >
                                        <i class="el-icon-plus"/>
                                        添加奖励
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="任务领取次数">
                                <el-radio-group
                                    v-model="ruleForm.accept_limit_count_type"
                                    :disabled="type === 'detail'"
                                    @change="handleAcceptLimitChange"
                                >
                                    <el-radio :label="-1">不限</el-radio>
                                    <el-radio :label="1">单次</el-radio>
                                    <el-radio :label="2">
                                        指定次数
                                        <el-form-item
                                            style="display: inline-block"
                                            prop="accept_limit_count"
                                            key="accept_limit_count"
                                            :disabled="ruleForm.accept_limit_count_type !== 2"
                                        >
                                            <el-input
                                                v-model="ruleForm.accept_limit_count"
                                                size="medium"
                                                clearable
                                                style="width: 152px;margin-left: 12px"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >次</span>
                                            </el-input>
                                        </el-form-item>
                                    </el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="任务形式">
                                <el-radio-group
                                    v-model="ruleForm.task_type"
                                    :disabled="type === 'detail'"
                                >
                                    <el-radio :label="1">线下</el-radio>
                                    <el-radio
                                        :label="2"
                                        disabled
                                    >线上</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </template>
                        <template v-else>
                            <el-form-item
                                label="任务总数"
                                prop="all_count"
                                key="all_count"
                                class="is-required"
                            >
                                <el-input-number
                                    v-model="ruleForm.all_count"
                                    placeholder="请输入任务总数"
                                    controls-position="right"
                                    :step="1"
                                    step-strictly
                                    :min="0"
                                    size="medium"
                                    style="width: 284px"
                                />
                            </el-form-item>
                            <!--普通任务-->
                            <template v-if="ruleForm.task_category === 3">
                                <el-form-item
                                    label="奖励设置"
                                    prop="reward"
                                    key="reward"
                                    class="is-required"
                                >
                                    <el-input
                                        v-model="ruleForm.reward"
                                        size="medium"
                                        clearable
                                        placeholder="请输入单个任务奖励金额"
                                        style="width: 284px"
                                        @change="getTaskMoney(ruleForm.reward)"
                                    >
                                        <span
                                            slot="suffix"
                                            style="margin-right: 6px"
                                        >元/个</span>
                                    </el-input>
                                    <span
                                        class="form-item-tips"
                                        v-if="stuagent_task_money"
                                    >用户端展示金额为{{ stuagent_task_money }}元</span>
                                </el-form-item>
                                <el-form-item
                                    label="任务反馈类型"
                                    class="is-required"
                                >
                                    <el-radio-group
                                        v-model="ruleForm.is_need_submit"
                                        :disabled="type === 'detail'"
                                    >
                                        <el-radio :label="2">自定义反馈</el-radio>
                                        <el-radio :label="1">无反馈</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item
                                    v-show="ruleForm.is_need_submit === 2"
                                    :style="{pointerEvents: status == 1 ? 'none' : ''}"
                                >
                                    <custom-form
                                        class="custom-form"
                                        ref="customForm"
                                        @send="getFormData"
                                    />
                                </el-form-item>
                            </template>
                            <template v-if="ruleForm.task_category === 4 || ruleForm.task_category === 5">
                                <el-form-item
                                    label="任务事件"
                                    class="is-required"
                                >
                                    <el-select
                                        v-model="ruleForm.task_event"
                                        placeholder="全部精英"
                                        size="medium"
                                        style="width: 284px"
                                        :disabled="type === 'detail'"
                                        @change="handleTaskEventChange"
                                    >
                                        <el-option
                                            label="粉丝拓展事件"
                                            value="fans_invite"
                                        />
                                        <el-option
                                            label="推广引流事件"
                                            value="attract_recommend"
                                            v-if="ruleForm.task_category === 4"
                                        />
                                    </el-select>
                                </el-form-item>
                                <el-form-item
                                    label="是否自动结算"
                                    class="is-required"
                                >
                                    <el-radio-group
                                        v-model="ruleForm.auto_award"
                                        :disabled="type === 'detail'"
                                    >
                                        <el-radio
                                            :label="1"
                                            :disabled="ruleForm.task_event === 'attract_recommend'"
                                        >是</el-radio>
                                        <el-radio :label="0">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item
                                    label="支持重复领取"
                                    class="is-required"
                                    v-if="ruleForm.task_event === 'attract_recommend'"
                                >
                                    <el-radio-group
                                        v-model="ruleForm.accept_limit_count"
                                        :disabled="type === 'detail'"
                                        @change="handleLimitCountChange"
                                    >
                                        <el-radio :label="-1">是</el-radio>
                                        <el-radio :label="1">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item
                                    label="多奖励设置"
                                    class="is-required"
                                    v-if="ruleForm.task_category === 5"
                                >
                                    <div class="multiple-reward-view">
                                        <el-form-item
                                            label="任务数量标准"
                                            class="is-required"
                                        >
                                            <el-radio-group
                                                v-model="ruleForm.require_submit_count_type"
                                                :disabled="type === 'detail'"
                                                @change="changeSubmitCountType"
                                            >
                                                <el-radio :label="2">子任务数量</el-radio>
                                                <el-radio :label="1">主任务数量</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                        <el-table
                                            :data="ruleForm.multiple_reward_list"
                                            class="data-table elite-task-edit__table"
                                            style="margin-top: 12px"
                                        >
                                            <el-table-column
                                                :label="ruleForm.require_submit_count_type === 1 ? '主任务' : '子任务'"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item style="margin-bottom: 16px">
                                                        {{ scope.row.require_submit_count_type === 1 ? '主任务' : '子任务' }}{{ scope.$index + 1 }}
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="截止时间"
                                                min-width="200"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item
                                                        :prop="`multiple_reward_list[${scope.$index}].require_time_calc`"
                                                        :rules="rules.require_time_calc"
                                                        style="margin-bottom: 16px"
                                                    >
                                                        <el-input
                                                            v-model="scope.row.require_time_calc"
                                                            size="medium"
                                                            style="width: 160px;"
                                                            placeholder="请输入"
                                                            @change="calcRequireTime(scope.row)"
                                                        >
                                                            <el-select
                                                                v-model="scope.row.require_time_type"
                                                                slot="append"
                                                                style="width: 76px"
                                                                @change="calcRequireTime(scope.row)"
                                                            >
                                                                <el-option
                                                                    label="天"
                                                                    :value="24"
                                                                />
                                                                <el-option
                                                                    label="小时"
                                                                    :value="1"
                                                                />
                                                            </el-select>
                                                        </el-input>
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                :label="ruleForm.require_submit_count_type === 1 ? '主任务数量' : '子任务数量'"
                                                min-width="200"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item
                                                        :prop="`multiple_reward_list[${scope.$index}].require_submit_count`"
                                                        :rules="rules.require_submit_count"
                                                        style="margin-bottom: 16px"
                                                    >
                                                        <el-input
                                                            v-model="scope.row.require_submit_count"
                                                            size="medium"
                                                            clearable
                                                            style="width: 160px"
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="奖励类型"
                                                min-width="200"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item style="margin-bottom: 16px">
                                                        <el-select
                                                            v-model="scope.row.type"
                                                            size="medium"
                                                            style="width: 160px"
                                                            placeholder="请选择"
                                                            @change="getTaskMoneyTable(scope, 'multiple_reward_list')"
                                                        >
                                                            <el-option
                                                                label="现金奖励"
                                                                :value="1"
                                                            />
                                                            <el-option
                                                                label="0元购学生券"
                                                                :value="2"
                                                            />
                                                            <el-option
                                                                label="同上"
                                                                :value="99"
                                                                v-if="scope.$index"
                                                            />
                                                        </el-select>
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="奖励金额/数量"
                                                min-width="200"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item
                                                        :prop="`multiple_reward_list[${scope.$index}].num`"
                                                        :rules="rules.num"
                                                        style="margin-bottom: 16px"
                                                    >
                                                        <el-input
                                                            v-model="scope.row.num"
                                                            size="medium"
                                                            clearable
                                                            placeholder="请输入"
                                                            style="width: 160px"
                                                            @change="getTaskMoneyTable(scope, 'multiple_reward_list')"
                                                        >
                                                            <span
                                                                slot="suffix"
                                                                style="margin-right: 6px;margin-top: 6px"
                                                            >{{ scope.row.type === 1 ? '元' : scope.row.type === 2 ? '张' : '' }}</span>
                                                        </el-input>
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="用户端显示金额"
                                                min-width="200"
                                                align="center"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item style="margin-bottom: 16px">
                                                        {{ scope.row.stuagent_task_money ? `${scope.row.stuagent_task_money}元` : '--' }}
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="前置条件"
                                                min-width="200"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item style="margin-bottom: 16px">
                                                        <template v-if="scope.$index === 0">
                                                            无
                                                        </template>
                                                        <template v-else>
                                                            <el-select
                                                                v-model="scope.row.require_pre_type"
                                                                size="medium"
                                                                style="width: 160px"
                                                                placeholder="请选择"
                                                            >
                                                                <el-option
                                                                    label="上一任务成功"
                                                                    :value="1"
                                                                />
                                                                <el-option
                                                                    label="上一任务结束"
                                                                    :value="2"
                                                                />
                                                            </el-select>
                                                        </template>
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="操作"
                                                align="center"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item style="margin-bottom: 16px">
                                                        <el-button
                                                            type="text"
                                                            :disabled="ruleForm.multiple_reward_list.length <= 1"
                                                            @click="deleteMultipleRewardItem(scope.$index)"
                                                        >删除</el-button>
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <div
                                            class="add-btn"
                                            style="margin: 20px 20px 0;"
                                            v-if="status != 1"
                                            @click="addMultipleRewardItem"
                                        >
                                            <i class="el-icon-plus"/>
                                            添加{{ ruleForm.require_submit_count_type === 1 ? '主任务' : '子任务' }}
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item
                                    label="梯度奖励设置"
                                    class="is-required"
                                    v-if="ruleForm.task_category === 4"
                                >
                                    <div class="gradient-reward-view">
                                        <el-table
                                            :data="ruleForm.gradient_reward_list"
                                            class="data-table elite-task-edit__table gradient"
                                        >
                                            <el-table-column
                                                label="梯度等级"
                                                align="center"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item style="margin-bottom: 16px">
                                                        梯度{{ scope.$index + 1 }}
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="要求数量"
                                                width="300"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item
                                                        :prop="`gradient_reward_list[${scope.$index}].require_submit_count`"
                                                        :rules="rules.require_submit_count"
                                                        style="margin-bottom: 16px"
                                                    >
                                                        <el-input
                                                            v-model="scope.row.require_submit_count"
                                                            size="medium"
                                                            clearable
                                                            style="width: 184px"
                                                            placeholder="请输入"
                                                        />
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="奖励类型"
                                                width="300"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item style="margin-bottom: 16px">
                                                        <el-select
                                                            v-model="scope.row.type"
                                                            size="medium"
                                                            style="width: 184px"
                                                            placeholder="请选择"
                                                            @change="handleChangeRewordType($event, scope)"
                                                        >
                                                            <el-option
                                                                label="现金奖励"
                                                                :value="1"
                                                            />
                                                            <el-option
                                                                label="0元购学生券"
                                                                :value="2"
                                                            />
                                                        </el-select>
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="奖励金额/数量"
                                                width="300"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item
                                                        :prop="`gradient_reward_list[${scope.$index}].num`"
                                                        :rules="rules.num"
                                                        style="margin-bottom: 16px"
                                                    >
                                                        <el-input
                                                            v-model="scope.row.num"
                                                            size="medium"
                                                            clearable
                                                            placeholder="请输入"
                                                            style="width: 184px"
                                                            @change="getTaskMoneyTable(scope, 'gradient_reward_list')"
                                                        >
                                                            <span
                                                                slot="suffix"
                                                                style="margin-right: 6px;margin-top: 6px"
                                                            >{{ scope.row.type === 1 ? '元' : '张' }}</span>
                                                        </el-input>
                                                    </el-form-item>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="用户端显示金额"
                                                min-width="200"
                                                align="center"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item
                                                        style="margin-bottom: 16px"
                                                        v-if="scope.row.type === 1"
                                                    >
                                                        {{ scope.row.stuagent_task_money ? `${scope.row.stuagent_task_money}元` : '--' }}
                                                    </el-form-item>
                                                    <div v-else>--</div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                label="操作"
                                                align="center"
                                            >
                                                <template slot-scope="scope">
                                                    <el-form-item style="margin-bottom: 16px">
                                                        <el-button
                                                            type="text"
                                                            :disabled="ruleForm.gradient_reward_list.length <= (ruleForm.task_event === 'fans_invite' ? 2 : 1)"
                                                            @click="deleteGradientRewardItem(scope.$index)"
                                                        >删除</el-button>
                                                    </el-form-item>

                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <div
                                            class="add-btn"
                                            style="margin: 20px 20px 0;"
                                            v-if="status != 1"
                                            @click="addGradientRewardItem"
                                        >
                                            <i class="el-icon-plus"/>
                                            添加奖励梯度
                                        </div>
                                    </div>
                                </el-form-item>
                                <el-form-item
                                    label="任务反馈类型"
                                    class="is-required"
                                    v-if="ruleForm.task_category === 4 && ruleForm.task_event === 'attract_recommend'"
                                >
                                    <el-radio-group
                                        v-model="ruleForm.is_need_submit"
                                        :disabled="type === 'detail'"
                                    >
                                        <el-radio :label="2">自定义反馈</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item
                                    v-if="ruleForm.task_category === 4 && ruleForm.task_event === 'attract_recommend'"
                                    :style="{pointerEvents: status == 1 ? 'none' : ''}"
                                >
                                    <custom-form-for-step
                                        class="custom-form"
                                        ref="customFormEvent"
                                        @send="getFormData"
                                    />
                                </el-form-item>
                            </template>
                        </template>
                    </div>
                    <template v-if="ruleForm.task_category !== 2">
                        <div class="form-title">
                            常见问题FAQ
                            <span class="form-title-tips">
                                学生经常遇到的问题，以及对应的问题解决方案
                            </span>
                        </div>
                        <div class="form-content">
                            <div class="question-view">
                                <div
                                    class="question-item"
                                    v-for="(item, index) in ruleForm.faq"
                                    :key="index"
                                >
                                    <el-form-item :label="`常见问题${index + 1}`">
                                        <el-row>
                                            <el-col :span="23">
                                                <el-input
                                                    v-model="item.title"
                                                    size="medium"
                                                    clearable
                                                    placeholder="请输入常见问题"
                                                />
                                            </el-col>
                                            <el-col :span="1">
                                                <el-button
                                                    type="text"
                                                    style="margin-left: 12px"
                                                    :disabled="ruleForm.faq.length === 1"
                                                    @click="deleteQuestionItem(index)"
                                                >删除</el-button>
                                            </el-col>
                                        </el-row>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-input
                                            v-model="item.desc"
                                            type="textarea"
                                            placeholder="请输入解决方法"
                                            :autosize="{ minRows: 4}"
                                        />
                                    </el-form-item>
                                    <el-form-item
                                        v-if="status != 1"
                                    >
                                        <div
                                            class="add-btn"
                                            style="margin-top: 0;"
                                            v-if="index === ruleForm.faq.length - 1"
                                            @click="addQuestionItem"
                                        >
                                            <i class="el-icon-plus"/>
                                            添加常见问题
                                        </div>
                                    </el-form-item>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </el-form>
            <div class="operating-view">
                <el-button
                    size="medium"
                    @click="handleRoute('eliteTaskList')"
                >
                    返回
                </el-button>
                <el-button
                    size="medium"
                    type="primary"
                    :loading="loading"
                    @click="beforeSubmit"
                >
                    提交
                </el-button>
                <el-popover
                    v-model="previewVisible"
                    placement="top"
                    width="240"
                    trigger="manual"
                    v-if="type !== 'add'"
                >
                    <div class="elite-task-edit-preview">
                        <i
                            class="el-icon-close"
                            @click="previewVisible = false"
                        />
                        <div class="qrcode-title">扫码预览</div>
                        <el-image
                            class="qrcode-image"
                            :src="previewQrcode"
                        />
                    </div>

                    <el-button
                        size="medium"
                        type="primary"
                        plain
                        slot="reference"
                        @click="beforeSubmit('preview')"
                    >
                        预览
                    </el-button>
                </el-popover>

            </div>
        </div>
        <!-- 图片预览 -->
        <img-preview ref="preview" />
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import { numberChinese } from "@/assets/js/utils";
import { deepClone } from "@/assets/js/utils";
import ImgPreview from "@/components/common/img-preview";
import ImageUpload from "@/components/common/image-upload";
import ImageUploadMultiple from "@/components/common/image-upload-multiple";
import CustomForm from "@/components/student/form";
import CustomFormForStep from "@/components/elite-task/custom-form-for-step";
import VideoUpload from "@/components/common/video-upload";

// 步骤数据模型
const stepModel = {
    content: '',
    images: []
};
// FAQ数据模型
const questionModel = {
    title: '',
    desc: ''
};
// 寝室任务奖励设置模型
const roomRewardModel = {
    room_series_count: '',
    award_money: ''
};
// 多奖励任务奖励设置模型
const multipleRewardModel = {
    // 1：天 2：小时
    require_time_type: 24,
    // 计算用任务时长
    require_time_calc: '',
    // 需要任务时长,秒
    require_second: '',
    // 需要任务数量
    require_submit_count: '',
    // 1余额 2学生券
    type: 1,
    // 奖励数量
    num: '',
    // 完成条件1:前一个奖励项成功,2:前一个奖励项结束
    require_pre_type: '',
    // 任务类型 1:主任务 2:子任务
    require_submit_count_type: 2
};
// 梯度任务奖励设置模型
const gradientRewardModel = {
    // 需要任务数量
    require_submit_count: '',
    // 0无 1余额 2学生券
    type: 1,
    // 奖励数量
    num: '',
};
const numberReg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/;

export default {
    name: 'EliteTaskEdit',
    mixins: [back],
    components: {VideoUpload, CustomForm, CustomFormForStep, ImageUploadMultiple, ImageUpload, ImgPreview},
    data() {
        const checkEndTime = (rule, value, callback) => {
            if(value > this.ruleForm.apply_start_time) {
                callback();
            } else {
                callback(new Error('结束时间不能小于开始时间'));
            }
        };

        const checkTaskFlow = (rule, value, callback) => {
            if(this.ruleForm.task_images.length || value) {
                callback();
            } else {
                callback(new Error('请填写任务方式或上传任务图片'));
            }
        };

        const checkImageList = (rule, value, callback) => {
            if(this.ruleForm.task_flow || value.length) {
                callback();
            } else {
                callback(new Error('请填写任务方式或上传任务图片'));
            }
        };

        return {
            type: 'add',
            status: '',
            isUpload: false,
            ruleForm: {
                // 编辑时任务编号
                task_no: '',
                // 任务类型 3普通任务 2寝室推广 5多奖励任务 4梯度任务
                task_category: 3,
                // 任务标题
                task_title: '',
                // 开始时间
                apply_start_time: '',
                // 结束时间
                apply_end_time: '',
                // 任务简介
                task_intro: '',
                // 任务方式 仅寝室任务
                task_flow: '',
                // 任务图标
                task_logo: '',
                // 导师微信
                task_qrcode: '',
                // 任务图片 仅寝室任务
                task_images: [],
                // 用户群体 0全部用户 1全部精英 2 精英等级
                student_limit_type: 2,
                // 精英等级
                student_limit_stuagent_level: 1,
                // 精英等级限制类型
                agent_level_limit_type: 1,
                // 精英等级多选模式
                allow_agent_levels: [],
                // 任务上下架状态
                task_status: 1,
                // 任务排序
                task_sort: 99,
                // 步骤引导 除寝室任务
                guide: [deepClone(stepModel)],
                // 任务总数
                all_count: undefined,
                // 奖励金额
                reward: '',
                // 反馈类型 2自定义反馈 1无反馈 仅普通任务
                is_need_submit: 2,
                // 反馈表单
                submit_config_json: '',
                // 常见问题
                faq: [deepClone(questionModel)],
                // 推广学校 仅寝室任务
                room_series_school_id: '',
                // 推广寝室性别 仅寝室任务
                room_series_sex: 0,
                // 任务形式 1线下 2线上 仅寝室任务
                task_type: 1,
                // 任务领取次数类型 -1不限制 1单次 2指定次数 仅寝室任务
                accept_limit_count_type: -1,
                // 任务领取次数 仅寝室任务
                accept_limit_count: -1,
                // 寝室任务奖励设置
                room_series_award_list: [deepClone(roomRewardModel)],
                // 任务事件 仅梯度任务多奖励任务
                task_event: 'fans_invite',
                // 是否自动结算 仅梯度任务多奖励任务
                auto_award: 1,
                // 多奖励任务
                multiple_reward_list: [deepClone(multipleRewardModel)],
                // 梯度奖励任务
                gradient_reward_list: [deepClone(gradientRewardModel), deepClone(multipleRewardModel)],
                // 多奖励任务 任务类型标准 1主任务 2 子任务 仅计算使用
                require_submit_count_type: 2,
                // 仅体验账号可见
                show_only_for_trial_stuagent: 0,
                // 任务时间 v2.2.0
                accept_expire_in: undefined,
                binding_school_ids: [],
                sex: 0,
                // 素材
                share_material: {
                    content: '',
                    video_url: '',
                    video_cover: '',
                    images: []
                }
            },
            rules: {
                task_title: [
                    {required: true, message: '请填写任务标题', trigger: 'blur'}
                ],
                task_qrcode: [
                    {required: false, message: '请上传导师微信', trigger: 'change'}
                ],
                task_intro: [
                    {required: true, message: '请填写任务介绍', trigger: 'blur'}
                ],
                apply_start_time: [
                    {required: true, message: '请选择开始时间', trigger: 'change'},
                ],
                apply_end_time: [
                    {required: true, message: '请选择结束时间', trigger: 'change'},
                    { validator: checkEndTime, trigger: 'change' }
                ],
                task_flow: [
                    { validator: checkTaskFlow, trigger: 'blur' }
                ],
                task_images: [
                    { validator: checkImageList, trigger: 'change' }
                ],
                guide: {
                    content: [
                        {required: true, message: '请填写步骤引导内容', trigger: 'blur'}
                    ],
                    images: [
                        {required: false, message: '请上传步骤示意图', trigger: 'change'}
                    ],
                },
                all_count: [
                    {required: true, message: '请填写任务总数', trigger: 'blur'},
                ],
                accept_limit_count: [
                    {required: true, message: '请填写任务领取指定次数', trigger: 'blur'},
                    {pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/, message: '任务领取次数必须为整数', trigger: 'blur'}
                ],
                reward: [
                    {required: true, message: '请填写任务奖励金额', trigger: 'blur'},
                    {pattern: numberReg, message: '任务奖励金额必须为数字', trigger: 'blur'},
                ],
                require_time_calc: [
                    {required: true, message: '请填写截止时间', trigger: 'blur'},
                ],
                require_submit_count: [
                    {required: true, message: '请填写任务数量', trigger: 'blur'},
                ],
                num: [
                    {required: true, message: '请填写奖励', trigger: 'blur'},
                ],
                accept_expire_in: [
                    {required: true, message: '请填写任务时间', trigger: 'blur'},
                ]
            },
            school_tree: [],
            schoolOptions: [],
            // 获取的计算任务奖励金额
            stuagent_task_money: '',
            // 预览二维码
            previewQrcode: '',
            previewVisible: false,
            loading: false,
            authResult: {}
        };
    },
    computed: {},
    watch: {},
    filters: {
        statusFilter(val) {
            switch (val) {
                case 0:
                    return '未开始';
                case 1:
                    return '进行中';
                case 2:
                    return '已结束';
                default:
                    return '--';
            }
        },
    },
    mounted() {
        this.init();
        this.getSchoolTree();
    },
    methods: {
        numberChinese,

        /**
         * @description 页面初始化
         */
        init() {
            let query = this.$route.query;

            this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '工作'}, {
                title: '平台标准任务',
                path: '/student/elite-task-list'
            }, {title: query.type === 'edit' ? '编辑任务' : query.type === 'add' ? '新建任务' : '查看任务'}]);
            this.authResult = this.$route.meta.authResult;

            this.type = query.type;
            this.status = query.status;
            // 编辑或查看时
            if (query.type === 'edit' || query.type === 'detail') {
                this.ruleForm.task_no = query.task_no;
                this.getDetailData();
            }
        },

        /**
         * @description 获取省/市/学校三级联动
         */
        getSchoolTree () {
            this.$post('/student/local_info%5Cschool_tree',{},resp => {
                if (resp.code === 1) {
                    // 回显学校 学校id为1 “北京大学” 出现回显不上的问题 暂时修改id
                    let data = deepClone(resp.data.tree);

                    data[0].children[0].children[0].id = 99999;
                    this.school_tree = data;
                    this.schoolOptions = resp.data.tree;
                }
            });
        },

        /**
         * @description 获取数据
         */
        getDetailData() {
            this.tableLoading = true;
            let params = {
                task_no: this.ruleForm.task_no
            };

            this.$post('/student/task_stuagent%5Cget', params, res => {
                if (res.code === 1) {
                    let data = res.data;

                    data.task_no = this.$route.query.task_no;
                    // 处理时间
                    data.apply_start_time = data.apply_start_time * 1000;
                    data.apply_end_time = data.apply_end_time * 1000;
                    data.require_submit_count_type = 2;

                    // 除寝室任务
                    if(data.task_category !== 2) {
                        // 处理任务数量
                        data.task_images = [];
                        data.room_series_award_list = [deepClone(roomRewardModel)];
                        if(!data.faq || !data.faq.length) {
                            data.faq = [deepClone(questionModel)];
                        }
                    }
                    // 寝室任务
                    if(data.task_category === 2) {
                        // 处理任务图片
                        data.task_images = data.task_images.split(',');
                        // 回显任务领取次数
                        if(data.accept_limit_count === -1 || data.accept_limit_count === 1) {
                            data.accept_limit_count_type = data.accept_limit_count;
                        } else {
                            data.accept_limit_count_type = data.accept_limit_count ? 2 : -1;
                        }
                        // 回显学校 学校id为1 “北京大学” 出现回显不上的问题 暂时修改id
                        if(data.room_series_school_id === 1) data.room_series_school_id = 99999;

                        data.guide = [deepClone(stepModel)];
                        data.faq = [deepClone(questionModel)];
                        data.gradient_reward_list = [deepClone(gradientRewardModel), deepClone(multipleRewardModel)];
                        data.multiple_reward_list = [deepClone(multipleRewardModel)];
                    }
                    // 普通任务
                    if(data.task_category === 3) {
                        data.reward = data.award_config;
                        this.$refs.customForm.setList(JSON.stringify(data.submit_config));
                        data.gradient_reward_list = [deepClone(gradientRewardModel), deepClone(multipleRewardModel)];
                        data.multiple_reward_list = [deepClone(multipleRewardModel)];
                        this.getTaskMoney(data.reward);
                        // if(data.submit_config_json) {
                        //     data.is_need_submit = 2;
                        // }
                    }
                    // 多奖励任务
                    if(data.task_category === 5) {
                        data.multiple_reward_list = data.award_config;
                        data.gradient_reward_list = [deepClone(gradientRewardModel), deepClone(multipleRewardModel)];
                        data.require_submit_count_type = data.award_config[0].require_submit_count_type;
                        data.multiple_reward_list.forEach(item => {
                            item.require_time_type = 1;
                            item.stuagent_task_money = item.num;
                            item.num = item.total_num;
                            item.require_time_calc = item.require_second / 3600;
                        });
                    }
                    // 梯度任务
                    if(data.task_category === 4) {
                        data.gradient_reward_list = data.award_config;
                        data.multiple_reward_list = [deepClone(multipleRewardModel)];
                        data.gradient_reward_list.forEach(item => {
                            item.stuagent_task_money = item.num;
                            item.num = item.total_num;
                        });
                        // 回显任务领取次数
                        if(data.accept_limit_count === -1 || data.accept_limit_count === 1) {
                            data.accept_limit_count_type = data.accept_limit_count;
                        } else {
                            data.accept_limit_count_type = data.accept_limit_count ? 2 : -1;
                        }
                        if (!data.share_material || data.share_material instanceof Array) {
                            data.share_material = {
                                content: '',
                                video_url: '',
                                video_cover: '',
                                images: []
                            };
                        }
                        setTimeout(() => {
                            // submit_config回显
                            if(data.task_event === 'attract_recommend') {
                                this.$refs.customFormEvent.setList(JSON.stringify(data.submit_config));
                            }
                            // 视频回显
                            if(this.$refs.videoUpload && data.share_material.video_url) {
                                this.$refs.videoUpload.setData(data.share_material.video_url);
                            }
                        });
                        /*if(data.accept_expire_in === -1 || !data.accept_expire_in) {
                            data.accept_expire_in_type = true;
                            data.accept_expire_in = '';
                        } else {
                            data.accept_expire_in_type = false;
                        }*/
                        if(!data.share_material.images) {
                            data.share_material.images = [];
                        }
                    }
                    this.ruleForm = data;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
                this.tableLoading = false;
            });
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 预览图片
         * @param   {String}    images      //单图预览
         * @param   {Array}     images      //多图预览
         * @param index
         */
        showPreview(images, index) {
            if (images && Object.prototype.toString.call(images) == '[object String]') {
                this.$refs.preview.show([
                    images
                ]);
            } else if (images && Object.prototype.toString.call(images) == '[object Array]') {
                this.$refs.preview.show(images, index);
            } else {
                this.$message({
                    type: 'warning',
                    message: '图片类型错误'
                });
            }
        },

        /**
         * 删除步骤
         * @param index
         */
        deleteStepItem(index) {
            this.ruleForm.guide.splice(index, 1);
        },

        /**
         * 添加步骤
         */
        addStepItem() {
            if(this.ruleForm.guide.length >= 20) {
                this.$message.warning('最多不超过20个步骤');
                return;
            }
            this.ruleForm.guide.push(deepClone(stepModel));
        },

        /**
         * 删除常见问题
         * @param index
         */
        deleteQuestionItem(index) {
            this.ruleForm.faq.splice(index, 1);
        },

        /**
         * 添加常见问题
         */
        addQuestionItem() {
            this.ruleForm.faq.push(deepClone(questionModel));
        },

        /**
         * 添加奖励说明
         */
        addRoomReward() {
            if(this.ruleForm.room_series_award_list.length >= 5) {
                this.$message.warning('最多可以添加5项');
                return;
            }
            this.ruleForm.room_series_award_list.push(deepClone(roomRewardModel));
        },

        /**
         * 删除奖励说明
         * @param index
         */
        deleteRoomReward(index) {
            if(this.ruleForm.room_series_award_list.length <= 1) {
                this.$message.warning('最少需要保留1项');
                return;
            }
            this.ruleForm.room_series_award_list.splice(index, 1);
        },

        /**
         * 添加多奖励任务说明
         */
        addMultipleRewardItem() {
            if(this.ruleForm.multiple_reward_list.length >= 20) {
                this.$message.warning('最多可以添加20项');
                return;
            }
            let multipleRewardItem = deepClone(multipleRewardModel);

            multipleRewardItem.require_pre_type = 1;
            multipleRewardItem.require_submit_count_type = this.ruleForm.require_submit_count_type;
            this.ruleForm.multiple_reward_list.push(multipleRewardItem);
        },

        /**
         * 删除多奖励任务
         * @param index
         */
        deleteMultipleRewardItem(index) {
            this.ruleForm.multiple_reward_list.splice(index, 1);
            this.ruleForm.multiple_reward_list[0].require_pre_type = '';
        },

        /**
         * 添加梯度任务奖励说明
         */
        addGradientRewardItem() {
            if(this.ruleForm.gradient_reward_list.length >= 20) {
                this.$message.warning('最多可以添加20项');
                return;
            }
            let gradientRewardItem = deepClone(gradientRewardModel);

            gradientRewardItem.type = this.ruleForm.gradient_reward_list[0].type;
            this.ruleForm.gradient_reward_list.push(gradientRewardItem);
        },

        /**
         * 删除梯度任务奖励
         * @param index
         */
        deleteGradientRewardItem(index) {
            this.ruleForm.gradient_reward_list.splice(index, 1);
        },

        /**
         * 获取自定义表单数据
         * @param data
         */
        getFormData(data) {
            this.ruleForm.submit_config_json = data;
        },

        /**
         * 寝室任务 领取次数限制更改
         * @param val
         */
        handleAcceptLimitChange(val) {
            if(val !== 2) {
                this.ruleForm.accept_limit_count = val;
            } else {
                this.ruleForm.accept_limit_count = '';
            }
        },

        /**
         * @description 提交数据处理
         */
        beforeSubmit(type) {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    let params = deepClone(this.ruleForm);

                    // 处理时间
                    params.apply_start_time = params.apply_start_time / 1000;
                    params.apply_end_time = params.apply_end_time / 1000;

                    // 除寝室任务
                    if(params.task_category !== 2) {
                        let faq = params.faq.filter(item => {
                            return item.title !== '' || item.desc !== '';
                        });

                        // 处理步骤引导
                        params.guide_json = JSON.stringify(params.guide);
                        // 处理常见问题
                        params.faq_json = JSON.stringify(faq);
                        params.allow_agent_levels = params.allow_agent_levels.join();

                        delete params.room_series_award_list;
                        delete params.task_images;
                    }
                    // 寝室任务
                    if(params.task_category === 2) {
                        // 处理寝室任务奖励设置
                        params.room_series_award_list = JSON.stringify(params.room_series_award_list);
                        // 处理学校选择 TODO: 临时解决方案
                        if(params.room_series_school_id === 99999) params.room_series_school_id = 1;
                        // 处理任务图片
                        params.task_images = params.task_images.join();
                    }
                    // 普通任务
                    if(params.task_category === 3) {
                        params.award_config_json = params.reward;
                        if(params.is_need_submit === 1) {
                            params.submit_config_json = '';
                        } else if(!params.submit_config_json || params.submit_config_json === "[]") {
                            this.$notify({
                                title: '提示',
                                type: 'warning',
                                message: '反馈内容不能为空'
                            });
                            return false;
                        }
                    }
                    // 多奖励任务
                    if(params.task_category === 5) {
                        // 同上处理
                        params.multiple_reward_list.forEach((item, index) => {
                            if(item.type === 99) {
                                item.type = params.multiple_reward_list[index - 1].type;
                            }
                        });
                        params.award_config_json = JSON.stringify(params.multiple_reward_list);
                    }
                    // 梯度任务
                    if(params.task_category === 4) {
                        // 判断素材内容
                        if(!params.share_material.content && !params.share_material.video_url && !params.share_material.images.length) {
                            params.share_material = '';
                        }
                        params.award_config_json = JSON.stringify(params.gradient_reward_list);
                        params.share_material = JSON.stringify(params.share_material);
                        params.binding_school_ids = params.binding_school_ids.join();
                        /*if(params.accept_expire_in_type || !params.accept_expire_in) {
                            params.accept_expire_in = -1;
                        }*/
                        // 判断反馈内容
                        if(params.task_event === 'attract_recommend') {
                            if(!params.submit_config_json || params.submit_config_json === "[]") {
                                this.$notify({
                                    title: '提示',
                                    type: 'warning',
                                    message: '反馈内容不能为空'
                                });
                                return false;
                            }
                        }
                        if(params.accept_expire_in <= 0) {
                            this.$message.warning('任务时间必须大于0');
                            return;
                        }
                    }

                    if(params.task_category !== 4) {
                        params.share_material = '';
                    }

                    delete params.guide;
                    delete params.faq;
                    delete params.gradient_reward_list;
                    delete params.multiple_reward_list;
                    if(type === 'preview') {
                        // 预览
                        this.handlePreview(params);
                    } else {
                        // 保存
                        this.handleSubmit(params);
                    }
                } else {
                    // 校验不通过
                    if(document.getElementsByClassName('el-form-item__error').length > 0){
                        this.$notify.warning({
                            title: '提示',
                            message: document.getElementsByClassName('el-form-item__error')[0].innerText
                        });
                    }
                    return false;
                }
            });
        },

        /**
         * 提交数据
         * @param params
         */
        handleSubmit(params) {
            this.loading = true;
            this.$post('/student/task_stuagent%5Csave', params, resp => {
                if (resp.code === 1) {
                    this.$notify({
                        title: '提示',
                        message: '保存成功',
                        duration: 2000,
                        type: 'success'
                    });
                    this.handleRoute('eliteTaskList');
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
                this.loading = false;
            });
        },

        /**
         * 预览
         * @param params
         */
        handlePreview(params) {
            this.$post('/student/task_stuagent%5Cpreview', params, resp => {
                if (resp.code === 1) {
                    let base = this.$baseUrl;
                    let ticket = localStorage.getItem('sessionTicket');

                    this.previewQrcode = `${base}/__local/common%5Cqrcode?content=${resp.data.preview_url}&__ticket=${ticket}`;
                    this.previewVisible = true;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        type: 'warning',
                        duration: 2000
                    });
                }
            });
        },

        /**
         * 切换主任务子任务类型
         * @param val
         */
        changeSubmitCountType(val) {
            this.ruleForm.multiple_reward_list.forEach(item => {
                item.require_submit_count_type = val;
            });
        },

        /**
         * 计算截止时间秒数
         * @param row
         */
        calcRequireTime(row) {
            this.$set(row, 'require_second', Number(row.require_time_calc) * row.require_time_type * 60 * 60);
        },

        /**
         * 梯度任务更改奖励类型 保持同步
         * @param val
         */
        handleChangeRewordType(val, scope) {
            this.ruleForm.gradient_reward_list.forEach(async item => {
                item.type = val;
                if(val === 1) {
                    this.$post('/student/task_stuagent%5Cget_stuagent_task_money', {task_money: 1}, resp => {
                        if (resp.code === 1) {
                            this.$set(item, 'stuagent_task_money', (item.num * resp.data.discount).toFixed(2));
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });

                }
            });
            this.getTaskMoneyTable(scope, 'gradient_reward_list');
        },

        /**
         * 获取任务分佣金额
         * @param task_money
         */
        async getTaskMoney(task_money) {
            if(!task_money) {
                this.stuagent_task_money = 0;
                return;
            }
            this.stuagent_task_money = await this.getUserMoney(task_money);
        },

        /**
         * 获取多奖励 梯度任务奖励金额
         * @param row
         * @param $index
         * @param tableName
         */
        async getTaskMoneyTable({row, $index}, tableName) {
            if(row.type === 2 || !row.num) {
                this.$set(this.ruleForm[tableName][$index], 'stuagent_task_money', 0);
                return;
            }

            this.$set(this.ruleForm[tableName][$index], 'stuagent_task_money', await this.getUserMoney(row.num));
        },

        /**
         * 获取计算用户显示金额
         * @param money
         * @returns {Promise<unknown>}
         */
        getUserMoney(money) {
            return new Promise((resolve, reject) => {
                this.$post('/student/task_stuagent%5Cget_stuagent_task_money', {task_money: money}, resp => {
                    if (resp.code === 1) {
                        resolve(resp.data.stuagent_task_money);
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                });
            });
        },

        /**
         * 切换任务类型
         * @param e
         */
        handleTaskTypeChange(e) {
            if(e !== 4) {
                this.ruleForm.task_event = 'fans_invite';
            }
            if(e === 4) {
                this.ruleForm.is_need_submit = 2;
            }
            this.$refs.ruleForm.clearValidate();
        },

        /**
         * 切换任务事件
         * @param e
         */
        handleTaskEventChange(e) {
            if(e === 'attract_recommend') {
                this.ruleForm.auto_award = 0;
                this.ruleForm.accept_limit_count = this.ruleForm.accept_limit_count_type = 1;
                if(this.ruleForm.gradient_reward_list.length > 1) {
                    this.ruleForm.gradient_reward_list.length = 1;
                }
            }
            if(e === 'fans_invite') {
                if(this.ruleForm.gradient_reward_list.length < 2) {
                    let gradientRewardItem = deepClone(gradientRewardModel);

                    gradientRewardItem.type = this.ruleForm.gradient_reward_list[0].type;
                    this.ruleForm.gradient_reward_list.push(gradientRewardItem);
                }
            }
        },

        /**
         * 切换支持重复领取
         * @param e
         */
        handleLimitCountChange(e) {
            this.ruleForm.accept_limit_count_type = e;
        },

        /**
         * 上传视频完成
         * @param value
         */
        afterUpload(value) {
            this.ruleForm.share_material.video_cover = value.video_cover;
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        /*header*/

        .header {
            height: 68px;
            padding: 24px;
            box-sizing: border-box;
            box-shadow: 0px -1px 0px 0px #F0F2F5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #F0F2F5;

            .header-title {
                color: #333333;
                font-size: 20px;
                height: 20px;
                font-weight: 500;
                position: relative;
                margin: 24px 0;
            }
        }
        .form-wrapper {
            margin: 24px 32px;
            padding: 24px 32px;
            background: #FBFBFB;
            border: 1px solid #EEEEEE;
            .form-title {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
                line-height: 16px;
                padding-bottom: 12px;
                border-bottom: 1px solid #E9E9E9;
                margin-bottom: 24px;
                &-tips {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #C2C2C2;
                    margin-left: 12px;
                }
            }
            .form-content {
                margin-bottom: 32px;
                .steps-view {
                    .step-item {
                        background: #F7F7F7;
                        border-radius: 2px;
                        border: 1px solid #DCDFE6;
                        margin-bottom: 12px;
                        &__header {
                            height: 44px;
                            background: #F0F0F0;
                            border-radius: 2px 2px 0 0;
                            border-bottom: 1px solid #DCDFE6;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            font-size: 16px;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #333333;
                            padding: 0 32px;
                            &__title {
                                position: relative;
                                &::before {
                                    content: "";
                                    display: block;
                                    position: absolute;
                                    width: 4px;
                                    height: 14px;
                                    background: #FF3030;
                                    left: -12px;
                                    top: 50%;
                                    transform: translateY(-50%);
                                }
                            }
                        }
                        &__content {
                            padding: 24px 32px;
                            .label-tips {
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                font-weight: 400;
                                color: #999999;
                                margin-left: 12px;
                            }
                        }
                    }
                }
                .material-view {
                    background: #F7F7F7;
                    border-radius: 2px;
                    border: 1px solid #DCDFE6;
                    padding: 24px 32px;
                    /deep/ .el-form-item {
                        &__content {
                            display: flex;
                            flex-direction: column;
                            align-items: flex-start;
                        }
                    }
                }
                // 寝室任务奖励
                .room-reward-view {
                    width: 582px;
                    background: #F7F7F7;
                    border-radius: 2px;
                    border: 1px solid #DCDFE6;
                    padding: 24px 32px;
                    .room-reward-item {
                        margin-bottom: 22px;
                        display: flex;
                        align-items: center;
                    }
                }
                // 多奖励任务奖励设置
                .multiple-reward-view {
                    background: #F7F7F7;
                    border-radius: 2px;
                    border: 1px solid #DCDFE6;
                    padding: 24px;
                    /deep/ .el-table {
                        th {
                            height: 44px;
                            padding: 0;
                        }
                    }
                }
                // 梯度任务奖励设置
                .gradient-reward-view {
                    max-width: 1300px;
                    background: #F7F7F7;
                    border-radius: 2px;
                    border: 1px solid #DCDFE6;
                    padding-bottom: 24px;
                }
                .add-btn {
                    height: 36px;
                    background: #F2FAFF;
                    border-radius: 4px;
                    border: 1px dashed #20A0FF;
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #20A0FF;
                    line-height: 14px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    margin-top: 24px;
                    .el-icon-plus {
                        margin-right: 10px;
                    }
                }
                .form-item-tips {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #C2C2C2;
                    margin-left: 12px;
                }
                // 自定义表单样式
                /deep/ .custom-form {
                    background: transparent;
                    .box {
                        background: transparent;
                        padding: 0;
                    }
                    .container_header {
                        width: 100%;
                        margin-bottom: 24px;
                        flex-wrap: nowrap;
                        .container_item {
                            display: flex;
                            flex: 1;
                            margin-right: 24px;
                            &:last-child {
                                margin-right: 0;
                            }
                        }
                        .container_add {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 24px;
                            color: #999;
                        }
                        .container_box {
                            flex: 1;
                            width: auto;
                            &:hover {
                                border-color: #20A0FF;
                                .container_title, .container_add {
                                    color: #20A0FF;
                                }
                            }
                        }
                    }
                    .main {
                        width: 100%;
                        .main_cont {
                            padding: 20px 24px;
                            background: #F7F7F7;
                            border-radius: 4px;
                            border: 1px solid #DCDFE6;
                            margin-bottom: 12px;
                            .main_checkbox_box, .main_radio_box {
                                align-items: center;
                            }
                            .main_text, .main_textarea, .main_radio, .main_checbox, .main_image_box, .main_image_ipt {
                                width: 100%;
                                .main_radio_head, .main_radio_list, .main_checkbox_list {
                                    width: 100%;
                                }
                                .main_radio_list {
                                    margin-left: 0;
                                    padding-left: 123px;
                                }
                                .main_checkbox_list {
                                    margin-left: 0;
                                    padding-left: 60px;
                                }
                            }
                        }
                    }
                    .no_data {
                        width: 100%;
                        height: 84px;
                        background: #F7F7F7;
                        border-radius: 2px;
                        border: 1px dashed #CAD0DC;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #999999;
                    }
                }
            }
        }
        .operating-view {
            padding: 8px 56px 52px;
            .el-button {
                width: 120px;
                margin-right: 36px;
            }
        }
    }
    /deep/ .el-form {
        .el-form-item__label {
            color: #333;
        }
        .is-required {
            .el-form-item__label {
                &:before {
                    content: "*";
                    display: inline-block;
                    color: #F56C6C;
                    margin-right: 4px;
                }
            }
        }
        .no-required {
            .el-form-item__label {
                &:before {
                    display: none;
                }
            }
        }
        .el-input-number {
            .el-input__inner {
                text-align: left;
            }
        }
        .el-input__suffix {
            display: flex;
            align-items: center;
        }
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: center;
    }
    /deep/ .el-textarea__inner {
        resize: none;
    }

    /deep/ .pic-view {
        align-items: flex-end;
        display: flex;
        .tips {
            margin-bottom: 24px;
        }
    }
    .data-table {
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
    }
}
</style>
<style lang="less">
.wrapper.elite-task-edit {
    .el-table.elite-task-edit__table {
        th {
            background: #f2f2f2!important;
        }
        td {
            background: #F7F7F7!important;
            border-bottom: 0;
        }
        &::before {
            background: #F7F7F7!important;
        }
        .el-table__header-wrapper {
            border-radius: 2px 2px 0 0;
            border: 1px solid #DCDFE6;
        }
        .el-table__header th {
            height: 28px;
            line-height: 28px;
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }
        .el-table__body-wrapper {
            padding-top: 12px;
            background: #F7F7F7;
        }
    }
    .el-table.elite-task-edit__table.gradient {
        .el-table__header-wrapper {
            border: 0;
            border-bottom: 1px solid #DCDFE6;
        }
    }
}
.elite-task-edit-preview {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    .el-icon-close {
        cursor: pointer;
        position: absolute;
        top: 12px;
        right: 12px;
        font-size: 16px;
    }
    .qrcode-title {
        font-size: 16px;
        margin-bottom: 12px;
    }
    .qrcode-image {
        width: 180px;
        height: 180px;
        margin-bottom: 12px
    }
}
</style>
